<!--
 * @Description: 组织管理
 * @Author: qingyang
 * @Date: 2022-01-10 16:04:17
 * @LastEditors: chenju
 * @LastEditTime: 2023-01-17 16:31:00
-->
<template>
  <div class="organization-page" v-loading="loading">
    <div class="organization-title">
      <span class="header-title">组织管理</span>
      <el-divider direction="vertical" />
      <span class="title-desc">拖动组织树可更改组织层级，请谨慎操作</span>
    </div>
    <div class="divider"></div>
    <div class="organization-content" v-show="treeData.length">
      <div
        class="organization-tree-wrap"
        :class="collapseState ? 'organization-tree-wrap-shrink' : ''"
      >
        <organization-tree
          @selectData="selectData"
          ref="treeRef"
          :collapseState="collapseState"
          :tree="treeData"
          @openDialong="openDialog"
        />
        <CCircleButton
          class="collapse-button"
          :type="collapseState ? 'c-xian-you' : 'c-xian-zuo'"
          @click="handleCollapse"
        ></CCircleButton>
      </div>
      <div
        class="organization-form-wrap"
        :class="collapseState ? 'organization-form-wrap-grow' : ''"
      >
        <organization-form :data="formData" />
      </div>
    </div>
    <div v-show="!treeData.length">
      <div class="empty-center">
        <img class="img" src="@/assets/images/empty_02.png" />
        <p class="g-font-18n1b" style="margin: 11px auto 3">该账号暂未关联组织</p>
        <p class="g-font-14n2">请联系管理员进行组织关联</p>
      </div>
    </div>

    <editOrganizationDialog
      :formData="formData"
      v-if="editDialogVisible"
      v-model:visible="editDialogVisible"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, provide } from 'vue';
import { empty } from '@/utils/index';
import OrganizationForm from './components/OrganizationForm.vue';
import OrganizationTree from './components/OrganizationTree.vue';
import { GetOrganizationTreeResult } from '@/apis/system/model/organizationModel';
import { getOrganizationTreeByUser } from '@/apis/system/organization';
import { store } from '@/store';
import editOrganizationDialog from './components/editOrganizationDialog.vue';
import CCircleButton from '@/components/CCircleButton/index.vue';

export default defineComponent({
  name: 'OrganizationManagement',
  components: {
    OrganizationForm,
    OrganizationTree,
    CCircleButton,
    editOrganizationDialog
  },
  setup() {
    const loading = ref(false);
    const formData = ref<GetOrganizationTreeResult>();
    const treeData = ref([] as GetOrganizationTreeResult[]);
    const selectData = (data: GetOrganizationTreeResult) => {
      formData.value = data;
      console.log('selectData_data', data);
    };
    const treeRef = ref();
    const refreshTree = (id?: number) => {
      console.log('refreshTree');
      treeRef.value.refreshTree(id);
    };

    const loadData = async () => {
      const userId = store.state.user.userInfo.userId;
      loading.value = true;
      try {
        let data = await getOrganizationTreeByUser(userId);
        console.log('loadList');
        treeData.value = data ?? [];
      } finally {
        loading.value = false;
      }
    };
    loadData();

    const editDialogVisible = ref(false);
    const openDialog = () => {
      formData.value!.organizationCode = '';
      editDialogVisible.value = true;
    };

    const collapseState = ref<boolean>(false);
    function handleCollapse() {
      // 点击收起动画
      collapseState.value = !collapseState.value;
    }

    provide('Data', {
      formData,
      refreshTree
    });
    return {
      empty,
      selectData,
      formData,
      refreshTree,
      treeRef,
      treeData,
      loading,
      openDialog,
      editDialogVisible,
      handleCollapse,
      collapseState
    };
  }
});
</script>

<style lang="scss" scoped>
.organization-page {
  flex: 1;
  display: flex;
  flex-direction: column;

  .organization-title {
    padding: 16px 20px;
    background-color: #fff;
    height: 55px;
    .header-title {
      font-size: 16px;
      font-weight: 600;
      color: #0a1f33;
      line-height: 24px;
    }
    .title-desc {
      font-size: 14px;
      font-weight: 400;
      color: #7a8a99;
      line-height: 22px;
    }
  }

  .divider {
    width: 1240px;
    height: 1px;
    background: #f0f4f7;
  }
  .organization-content {
    // flex: 1;
    display: flex;
    // position: relative;
    height: calc(100vh - 50px - 56px);
    .organization-tree-wrap {
      position: relative;
      flex-shrink: 0;
      width: 240px;
      height: 100%;
      transition: width 0.3s;
      .collapse-button {
        position: absolute;
        z-index: 999;
        top: 257px;
        left: 224px;
        // top: calc(50% - (50px - 40px - 80px) / 2);
        // right: 304px;
        // transition: right 0.3s;
      }
    }
    .organization-tree-wrap-shrink {
      width: 0 !important;
      transition: width 0.3s;

      .input-box {
        display: none;
      }
      .collapse-button {
        left: 0;
        z-index: 9999;
        transition: left 0.3s;
        // top: calc(50% - (50px - 40px - 80px) / 2);
        // right: 304px;
        // transition: right 0.3s;
      }
    }
    .audit-history-wrapper--collapse {
      width: 0 !important;
      // .collapse-button {
      //   right: 48px;
      // }
    }
    .organization-form-wrap {
      // flex: 1;
      transition: width 0.3s;
      width: calc(100% - 240px);
      height: 100%;
      border-left: 1px solid #ebeef5;
      // background-color: #ccc;
    }

    .organization-form-wrap-grow {
      transition: width 0.3s;
      width: 100%;
    }
  }
}

.empty-center {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 207px;
  .img {
    height: 196px;
    width: 281px;
  }
}
:deep(.search-wrap) {
  border-bottom: none;
}
</style>
